<template>
  <el-dialog
    v-model="dialogFormVisible"
    :title="title"
    width="1300px"
    @close="close"
  >
    <vab-query-form v-if="floor != 2">
      <vab-query-form-left-panel :span="12">
        <el-button :icon="Plus" type="primary" @click="addTask(queryForm)">
          添加
        </el-button>
      </vab-query-form-left-panel>
    </vab-query-form>
    <el-table
      v-loading="listLoading"
      :data="list"
      @selection-change="setSelectRows"
    >
      <el-table-column
        align="center"
        label="任务ID"
        prop="WorkTaskSetID"
        show-overflow-tooltip
        width="100"
      />
      <!-- <el-table-column
        align="center"
        label="添加时间"
        prop="addTime"
        show-overflow-tooltip
        width="200"
      /> -->
      <el-table-column
        v-if="floor != 2"
        width="100"
        align="center"
        label="产品类"
        prop="ProductName"
        show-overflow-tooltip
      />
      <el-table-column
        v-if="floor != 2"
        width="100"
        align="center"
        label="任务类型"
        prop="WorkTaskClass"
        show-overflow-tooltip
      />

      <el-table-column
        align="center"
        label="任务名称"
        prop="WorkTaskName"
        show-overflow-tooltip
      />
      <el-table-column
        v-if="floor != 2"
        align="center"
        label="任务人"
        prop="AssignOrderSet"
        show-overflow-tooltip
      />
      <el-table-column
        v-if="floor != 2"
        align="center"
        label="是否启用"
        width="100"
      >
        <template #default="{ row }">
          <el-switch
            v-model="row.state"
            class="mt-2"
            inline-prompt
            :active-value="1"
            :inactive-value="0"
            @change="toState(row)"
          />
        </template>
      </el-table-column>
      <el-table-column v-else label="服务时长（月）">
        <template #default="{ row }">
          <el-input-number
            v-model="row.ServiceDates"
            @change="handleChange(row)"
          />
          个月
        </template>
      </el-table-column>
      <el-table-column
        v-if="floor != 2"
        align="center"
        label="任务单位"
        prop="WorkTaskUnit"
        show-overflow-tooltip
      />
      <el-table-column
        v-if="floor != 2"
        align="center"
        label="提成金额"
        prop="TichengPrice"
        show-overflow-tooltip
      />

      <el-table-column
        v-if="floor != 2"
        align="center"
        label="操作"
        width="200"
      >
        <template #default="{ row }">
          <el-button text @click="addTask(row)">编辑</el-button>
          <el-button text @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
      <el-table-column v-else label="数量">
        <template #default="{ row }">
          <el-input-number
            v-model="row.TaskSetNum"
            @change="handleChange(row)"
          />
        </template>
      </el-table-column>
    </el-table>

    <template #footer>
      <div v-if="floor != 2">
        <!-- <el-button @click="close">取 消</el-button> -->
        <el-button type="primary" @click="close">确 定</el-button>
      </div>
      <div v-else>
        <el-button type="primary" @click="close">确 定</el-button>
      </div>
    </template>
  </el-dialog>
  <taskEdit ref="taskEditRef" @fetch-data="fetchData" />
</template>

<script>
  import {
    getWorkTaskSetList,
    WorkTaskSetDel,
    WorkTaskSetState,
    ProductTaskSetEdit,
  } from '@/api/common'
  import taskEdit from './TaskSettingEdit'

  export default defineComponent({
    name: 'TaskSettingEdit',
    components: { taskEdit },
    emits: ['fetch-data'],
    setup() {
      const $baseConfirm = inject('$baseConfirm')
      const $baseMessage = inject('$baseMessage')
      const state = reactive({
        floor: 0,
        allList: [],
        taskEditRef: null,
        list: [],
        productList: [],
        workTaskClass: [],
        assignOrderSetList: [],
        listLoading: true,
        queryForm: {},
        title: '',
        dialogFormVisible: false,
        BusinessClassOptions: [],
        ProductClassOptions: [],
      })

      const showEdit = (row, num) => {
        state.floor = num
        if (row.ProductID) {
          if (num == 1) {
            row.ProductClassID = row.ProductID
            state.title = `${row.ProductName}任务设置`
          }
          if (num == 2) {
            row.SetProductID = row.ProductID
            state.title = `${row.ProductName}任务量设置`
          }
          state.queryForm = Object.assign({}, row)
          console.log(state.queryForm, 'state.queryForm ')
          fetchData(num)
        } else {
          state.title = '添加'
        }
        state.dialogFormVisible = true
      }

      const addTask = (row) => {
        console.log(row, '点击的那个')
        if (row.WorkTaskSetID) {
          state.taskEditRef.showEdit(row, state.allList, 1)
        } else {
          state.taskEditRef.showEdit(row, state.allList, 2)
        }
      }
      // 开关
      const toState = async (row) => {
        const dataMsg = {
          WorkTaskSetID: row.WorkTaskSetID,
        }
        await WorkTaskSetState(dataMsg)
        $baseMessage('操作成功', 'success', 'vab-hey-message-success')

        await fetchData()
      }

      const setSelectRows = (val) => {
        state.selectRows = val
      }
      const close = () => {
        state.dialogFormVisible = false
      }
      const handleChange = async (row) => {
        console.log(row, '123123123')
        const dataMsg = {
          WorkTaskSetID: row.WorkTaskSetID,
          ProductID: state.queryForm.SetProductID,
          ServiceDates: row.ServiceDates,
          TaskSetNum: row.TaskSetNum,
        }
        await ProductTaskSetEdit(dataMsg)
      }

      const fetchData = async (num) => {
        state.listLoading = true
        if (num == 2) {
          console.log(state.queryForm, 'state.queryForm')
          const dataMsg = {
            ProductID: state.queryForm.ProductID,
            ProductClassID: state.queryForm.upProductID,
          }
          const {
            data: { WorkTaskSetList },
          } = await getWorkTaskSetList(dataMsg)
          state.list = WorkTaskSetList
        } else {
          const dataMsg = {
            ProductClassID: state.queryForm.ProductClassID,
          }
          const { data } = await getWorkTaskSetList(dataMsg)
          state.allList = data
          state.list = data.WorkTaskSetList
          state.productList = data.productList
          state.workTaskClass = data.WorkTaskClass
          state.assignOrderSetList = data.AssignOrderSetList
        }

        state.listLoading = false
      }

      const handleDelete = (row) => {
        if (row.WorkTaskSetID) {
          $baseConfirm('你确定要删除当前项吗', null, async () => {
            const { msg } = await WorkTaskSetDel({
              WorkTaskSetID: row.WorkTaskSetID,
            })
            $baseMessage(msg, 'success', 'vab-hey-message-success')
            await fetchData()
          })
        } else {
          if (state.selectRows.length > 0) {
            const ids = state.selectRows.map((item) => item.id).join()
            $baseConfirm('你确定要删除选中项吗', null, async () => {
              const { msg } = await doDelete({ ids })
              $baseMessage(msg, 'success', 'vab-hey-message-success')
              await fetchData()
            })
          } else {
            $baseMessage('未选中任何行', 'error', 'vab-hey-message-error')
          }
        }
      }

      return {
        ...toRefs(state),
        fetchData,
        handleDelete,
        close,
        handleChange,
        toState,
        setSelectRows,
        addTask,
        showEdit,
      }
    },
  })
</script>
